
<template>
  <el-card v-loading="cardLoading">
    <div class="card-header">
      <el-select v-model="selectValue" clearable filterable style="width: 150px;margin-right: 40px;" placeholder="请选择数据集">
        <el-option v-for="item in searchData" :key="item.dataset_id" :label="item.dataset_name" :value="item.dataset_id">
        </el-option>
      </el-select>
      <el-button @click="handleFind" type="primary"  v-permission="['photo:tags:list']">
        <el-icon style="vertical-align: middle;">
          <Search />
        </el-icon>
        <span style="vertical-align: middle;" >查找</span>
      </el-button>
    </div>
    <!-- 实现表格和分页 -->
    <el-table :data="List" border :table-layout="tableLayout" :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }">
      <el-table-column type="index" label="序号" porp="dataset_id"></el-table-column>
      <el-table-column label="数据量" prop="entity_count"></el-table-column>
      <el-table-column label="标签名称" prop="label_name"></el-table-column>
      <el-table-column label="操作" width="auto" min-width="280px">
        <template v-slot="scope">
          <el-row :gutter="20" class="flex justify-center">
            <el-tooltip content="删除" placement="top" class="btn">
              <el-button type="danger" @click="handleDelete(scope.row.label_name)" icon="Delete" v-permission="['photo:tags:delete']" />
            </el-tooltip>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    
  </el-card>
</template>

<script setup>
import {
  getDataList
} from '~/api/photoList.js'
import {
  getDataTags,
  deleteDataTags
} from '~/api/photoTags.js'

import { ref, onMounted, reactive } from 'vue'
import {
  toast,
  showModal
} from '~/composables/util.js'

const cardLoading = ref(false)
const type = 'IMAGE_CLASSIFICATION'
const List = ref([])
const tableLayout = ref('fixed')


async function Init() {
  cardLoading.value = true
  const body = {
    type
  }
  //获取到数据集列表
  await getDataList(body).then(res => {
    console.log(res)
    if (res.data.data !== null) {
      const result = res.data.data.results
      searchData.value = result
    } else {
      toast(res.data.msg, 'warning', false, 3000)
    }
  })

  cardLoading.value = false
}

onMounted(() => {
  Init()
})


//搜索开始
const searchData = ref([])
const selectValue = ref('')

//查找
async function handleFind() {
  cardLoading.value = true
  const body = {
    type,
    dataset_id: selectValue.value
  }
  //获取到数据集列表
  await getDataTags(body).then(res => {
    console.log(res)
    if (res.data.data !== null) {
      const result = res.data.data.results
      List.value = result
    } else {
      toast(res.data.msg, 'warning', false, 3000)
    }
  }).finally(()=>{
    cardLoading.value = false
  })
}

//搜索结束

//删除开始
const handleDelete = function (label_name) {
  const body = {
    type,
    dataset_id: selectValue.value,
    label_name
  } 
  console.log(body)
  showModal('是否要删除该数据?').then(async () => {
    toast('正在删除中...', 'info', false, 3000)
    await deleteDataTags(body).then(res => {
      console.log(res)
      if (res.data.data !== null && !res.data.data.error_code) {
        toast('删除成功', 'success', false, 3000)
      } else if(res.data.data.error_code){
        toast(res.data.data.error_msg, 'warning', false, 3000)
      } else{
        toast(res.data.msg, 'warning', false, 3000)
      }
      Init()
    }).finally(() => {
    })
  }).catch(err => {
    console.log(err)
  })
}
//删除结束

</script>

<style scoped>
.form {
  @apply flex justify-start items-center
}

.btn {
  margin: 0 10px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.roleList-scrollbar {
  max-width: 800px;
  max-height: 160px;
}
</style>